import React, { useState, useEffect } from 'react';
import { ArrowLeft, Find } from '@nutui/icons-react';
import { Steps, Step, Button } from '@nutui/nutui-react';
import '@nutui/nutui-react/dist/style.css';
import { Input, Radio, Select } from 'antd';
import { useNavigate } from 'react-router-dom';
import './MyHouse_information.css';

const MyHouse_information = (props) => {
    const navigate = useNavigate();
    const [isObj, setIsObj] = useState({});

    const [city, setCity] = useState('')
    const [cityMarket, setCityMarket] = useState('')

    const handleLocationClick = () => {
        const aMapScript = document.createElement('script');
        aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=8be2bfb5fa90730e0385e612261c8de5&plugin=AMap.CitySearch');
        aMapScript.onload = () => {
            AMap.plugin(['AMap.Geolocation', 'AMap.Geocoder'], () => {
                const geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    showButton: true,
                    buttonPosition: 'LB',
                    panToLocation: true,      //定位成功后将定位到的位置作为地图中心点，默认：true
                    GeoLocationFirst: true,     //定位成功后是否直接使用定位结果，设置为true时，定位成功后将不再进行后续的定位操作，默认：false
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                });
                const geocoder = new AMap.Geocoder(); // 创建地理编码实例
                geolocation.getCurrentPosition(); //返回定位信息
                console.log(geolocation.getCurrentPosition())
                AMap.event.addListener(geolocation, 'complete', (data) => {
                    const lnglat = [data.position.lng, data.position.lat];
                    geocoder.getAddress(lnglat,async (status, result) => {
                        console.log(status, result);
                        console.log(result.regeocode)
                        setIsObj({...isObj,ne:result.regeocode.addressComponent.district+result.regeocode.addressComponent.streetNumber})
                    });
                });
                AMap.event.addListener(geolocation, 'error', (data) => {
                    console.log(data);
                    console.log('定位失败');
                })
            })
        };
        document.head.appendChild(aMapScript); // 将script标签添加到head中
    };

    return (
        <div>
            <div>
                <Input
                    placeholder="请输入小区名称"
                    value={isObj.ne}
                    onChange={(e) => {
                        setIsObj({ ...isObj, ne: e.target.value });
                        console.log(isObj);
                    }}
                    suffix={<Find onClick={() => { handleLocationClick() }}></Find>}
                />
                <Input suffix placeholder="请输入楼栋号" value={isObj.unit} onChange={(e) => setIsObj({ ...isObj, unit: e.target.value })} />
                <Select
                    defaultValue=""
                    style={{
                        width: '100%',
                    }}
                    popupMatchSelectWidth={true}
                    placement={'topLeft'}
                    options={[
                        {
                            value: '',
                            label: '选择此房屋状态',
                            disabled: true,
                        },
                        {
                            value: '自住',
                            label: '自住',
                        },
                        {
                            value: '闲置',
                            label: '闲置',
                        },
                        {
                            value: '出租',
                            label: '出租',
                        },
                        {
                            value: '出借',
                            label: '出借',
                        },
                        {
                            value: '其他',
                            label: '其他',
                        },
                    ]}
                    onChange={(e) => setIsObj({ ...isObj, status: e })}
                />
            </div>
            <Button type="primary" onClick={() => { props.handleStep(isObj); setIsObj({}) }}>下一步</Button>
            <Button type="primary" onClick={() => { navigate('/mapPage') }}>查看位置信息</Button>
        </div>
    );
};

export default MyHouse_information;